import { Descriptions, Drawer, Empty, message, Spin } from 'antd';
import React, { useCallback, useEffect, useState } from 'react';
import { departmentAPI } from '../../type';
import useRequest from '@ahooksjs/use-request';
import { getDeptDetail } from '../../service';
import MyIcon from '@/components/MyIcon';
import ScrollBarLayout from '@/components/ScrollBarLayout';

const DesItem = Descriptions.Item;

import detailStyle from '../addEditInfoSty.less';
import { TypographyTitle } from '@/components/Typography';

const DetailInfoDrawer = React.forwardRef(
  (
    {
      visible,
      detailID, //查询详情ID
      onCloseDra, //关闭弹框
    }: departmentAPI.IDetailInfoType,
    ref,
  ) => {
    // 保存详情信息
    const [detailInfo, setDetailInfo] = useState<any>();
    const setDetail = useCallback(
      (obj: any) => {
        setDetailInfo(obj);
      },
      [detailInfo],
    );

    // 获取详情loading
    const [detailLoading, setDetailLoading] = useState<boolean>(true);
    const onInfoLoading = useCallback(() => {
      setDetailLoading(true);
    }, [detailLoading]);
    const closeInfoLoading = useCallback(() => {
      setDetailLoading(false);
    }, [detailLoading]);

    useEffect(() => {
      let payload = {
        deptID: detailID?.id,
      };
      if (detailID?.id && visible) {
        getDetailInfo?.run(payload);
      }
      return () => {
        setDetail(null);
        onInfoLoading();
      };
    }, [detailID?.viersionNum, visible]);

    // 获取详情信息
    const getDetailInfo = useRequest(
      (infoID: any) => {
        return getDeptDetail(infoID);
      },
      {
        manual: true,
        onSuccess: (res: any) => {
          if (res && res?.msgFlag) {
            message?.success(res?.msg);
            setDetail(res?.obj);
          }
          closeInfoLoading();
        },
      },
    );

    return (
      <div>
        <Drawer
          open={visible}
          onClose={() => {
            onCloseDra();
          }}
          title={<div>组织机构详情</div>}
          style={{ position: 'absolute' }}
          placement="right"
          getContainer={false}
          width={document.body.clientWidth * 0.45}
          headerStyle={{
            padding: '.5rem',
          }}
          bodyStyle={{
            padding: '10px 5px',
          }}
          closable={false}
          destroyOnClose={true}
        >
          <ScrollBarLayout>
            <div style={{ display: visible ? 'block' : 'none' }}>
              <Spin spinning={detailLoading}>
                <div style={{ padding: '10px' }}>
                  {detailInfo && detailInfo?.id ? (
                    <>
                      <div style={{ padding: '0px 0px 10px 0px' }}>
                        <TypographyTitle
                          level={4}
                          style={{
                            margin: 0,
                          }}
                        >
                          基本信息
                        </TypographyTitle>
                      </div>
                      <div className={detailStyle['detailDept']}>
                        <Descriptions bordered={true} size="small" column={4}>
                          <DesItem
                            span={4}
                            label={
                              <span>
                                <MyIcon type="zuzhijigou" />
                                &nbsp;&nbsp;机构名称
                              </span>
                            }
                          >
                            {(detailInfo && detailInfo.name) || '--'}
                          </DesItem>
                          <DesItem
                            span={2}
                            label={
                              <span>
                                <MyIcon type="icon-transfer" />
                                &nbsp;&nbsp;隶属机构
                              </span>
                            }
                          >
                            {detailInfo && detailInfo?.pName ? detailInfo?.pName : '--'}
                          </DesItem>
                          <DesItem
                            span={2}
                            label={
                              <span>
                                <MyIcon type="quyu" />
                                &nbsp;&nbsp;行政区域
                              </span>
                            }
                          >
                            {detailInfo
                              ? (detailInfo.provinceName ? detailInfo.provinceName : '') +
                                (detailInfo.cityName ? ` / ${detailInfo.cityName}` : '') +
                                (detailInfo.countyName ? ` / ${detailInfo.countyName}` : '')
                              : '--'}
                          </DesItem>
                          <DesItem
                            span={2}
                            label={
                              <span>
                                <MyIcon type="icon-leixing" />
                                &nbsp;&nbsp;机构类型
                              </span>
                            }
                          >
                            {detailInfo && detailInfo.category == 1 ? '部门' : '单位' || '--'}
                          </DesItem>
                          <DesItem
                            span={2}
                            label={
                              <span>
                                <MyIcon type="icon-leixing" />
                                &nbsp;&nbsp;是否是科研机构
                              </span>
                            }
                          >
                            {detailInfo && detailInfo.deptFlag == 1 ? '是' : '否' || '--'}
                          </DesItem>
                          {/* <DesItem
                            span={2}
                            label={
                              <span>
                                <MyIcon type="ic-normal-zidianguanli" />
                                &nbsp;&nbsp;机构类别
                              </span>
                            }
                          >
                            <span
                              style={{
                                color:
                                  detailInfo?.deptTypeName?.split('||')[1] ??
                                  '',
                              }}
                            >
                              {(detailInfo &&
                                detailInfo.deptTypeName &&
                                detailInfo?.deptTypeName?.split('||')[0]) ||
                                '--'}
                            </span>
                          </DesItem> */}
                          <DesItem
                            span={2}
                            label={
                              <span>
                                <MyIcon type="zhuangtai" />
                                &nbsp;&nbsp;机构状态
                              </span>
                            }
                          >
                            <span
                              style={{
                                color: detailInfo?.isOpen == 1 ? '#52c41a' : '#f00',
                              }}
                            >
                              {detailInfo && detailInfo.isOpen == 1 ? '启用' : '禁用' || '--'}
                            </span>
                          </DesItem>
                          <DesItem
                            span={2}
                            label={
                              <span>
                                <MyIcon type="icon-sketch" />
                                &nbsp;&nbsp;简码
                              </span>
                            }
                          >
                            {(detailInfo && detailInfo.shortCode) || '--'}
                          </DesItem>
                          <DesItem
                            span={2}
                            label={
                              <span>
                                <MyIcon type="lianxiren" />
                                &nbsp;&nbsp;联系人
                              </span>
                            }
                          >
                            {(detailInfo && detailInfo.contactName) || '--'}
                          </DesItem>
                          <DesItem
                            span={2}
                            label={
                              <span>
                                <MyIcon type="icon-phone1" />
                                &nbsp;&nbsp;联系电话
                              </span>
                            }
                          >
                            {(detailInfo && detailInfo?.contactPhone) || '--'}
                          </DesItem>
                          <DesItem
                            span={2}
                            label={
                              <span>
                                <MyIcon type="youxiang2" />
                                &nbsp;&nbsp;企业邮箱
                              </span>
                            }
                          >
                            {(detailInfo && detailInfo?.emailNum) || '--'}
                          </DesItem>
                          <DesItem
                            span={2}
                            label={
                              <span>
                                <MyIcon type="chinapost" />
                                &nbsp;&nbsp;邮政编码
                              </span>
                            }
                          >
                            {(detailInfo && detailInfo?.zipNum) || '--'}
                          </DesItem>
                          <DesItem
                            span={4}
                            label={
                              <span>
                                <MyIcon type="weizhi" />
                                &nbsp;&nbsp;地址
                              </span>
                            }
                          >
                            {(detailInfo && detailInfo?.address) || '--'}
                          </DesItem>
                          <DesItem
                            span={4}
                            label={
                              <span>
                                <MyIcon type="icon-beizhu" />
                                &nbsp;&nbsp;备注
                              </span>
                            }
                          >
                            {(detailInfo && detailInfo?.remark) || '--'}
                          </DesItem>
                        </Descriptions>
                      </div>
                    </>
                  ) : (
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                  )}
                </div>
              </Spin>
            </div>
          </ScrollBarLayout>
        </Drawer>
      </div>
    );
  },
);

export default DetailInfoDrawer;
